<template>
  <div class="resources-Main">
    <ul id="resources-Main-ul">
      <li class="resources-Main-ul-li">
        <ul class="resources-Main-ul-li-header">
          <li class="header-lis">服务器名称</li>
          <li class="header-lis">CPU使用率</li>
          <li class="header-lis">磁盘OI利用率</li>
          <li class="header-lis">内存使用量（MB）</li>
          <li class="header-lis">磁盘使用率</li>
          <li class="header-lis">状态</li>
          <!--<li class="header-lis">操作</li>-->
        </ul>
      </li>
      <li class="resources-Main-ul-li">
        <ul class="resources-Main-ul-li-content"  v-for="(item,index) in tableData" :key="index" @click="details()">
          <li class="content-lis">
            <span>{{item.name}}</span>
          </li>
          <li class="content-lis">
            <span>{{item.CPU}}</span>
          </li>
          <li class="content-lis"><span>{{item.OI}}</span></li>
          <li class="content-lis">{{item.memory}}</li>
          <li class="content-lis">{{item.memory1}}</li>
          <li class="content-lis" style="position: relative">
            <img :src="item.status" alt="" style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto">
          </li>
          <!--<li class="content-lis check">-->
          <!--<img src="../../../static/images/class_name5.png" alt=""><span>查看</span>-->
          <!--</li>-->
        </ul>
      </li>
    </ul>
    <Page :total="count" :page-size="pageSize" show-elevator show-total/>
  </div>
</template>

<script>
  export default {
    name: 'resources',
    data () {
      return {
        tableData: [
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          },
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          },
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          },
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          },
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          },
          {
            name: 'ucd-ty-app-demo-1-ucd-tingyun-com',
            CPU: '80',
            OI: '60',
            memory: '1234',
            memory1: '73',
            status: '../../../static/images/status.png'
          }
        ],
        count: 30,
        pageSize: 5,
        id: 0
      }
    },
    methods: {
      details () {
        // alert('跳转')
        this.$router.push({name: 'details', params: {id: this.id}})
        //  取数据
        //   this.$route.params.id
      }
    }
  }
</script>

<style lang="less">
  li{
    list-style: none;
  }
  #resources-Main-ul {
    width: 100%;
    .resources-Main-ul-li {
      width: 100%;
      height: auto;
      /*margin-bottom: 20px;*/
      border-radius: 4px;

      .resources-Main-ul-li-header {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 0 0 0 80px;
        .header-lis {
          height: 100%;
          font-size: 14px;
          line-height: 60px;
          text-align: center;
        }
        .header-lis:nth-child(1) {
          width: 25%;
          text-align: left;
        }
        .header-lis:nth-child(2) {
          width: 15%;
          text-align: left;
        }
        .header-lis:nth-child(3) {
          width: 15%;
          text-align: left;
        }
        .header-lis:nth-child(4) {
          width: 17%;
          text-align: left;
        }
        .header-lis:nth-child(5) {
          width: 13%;
          text-align: left;
        }
        .header-lis:nth-child(6) {
          width: 15%;
        }
      }
    }
    .resources-Main-ul-li:nth-child(1) {
      height: 60px;
      background: #fae5e7;
      border-bottom: none;
      border-radius: 6px 6px 2px 2px;
    }

    .resources-Main-ul-li:nth-child(2) {
      background: #fff;
      /*height: auto;*/
      min-height: 500px;
      margin-bottom: 48px;
    }

    .resources-Main-ul-li-content {
      cursor: pointer;
      width: 100%;
      height: 55px;
      line-height: 55px;
      display: flex;
      border-bottom: 2px solid #fafafa;
      box-sizing: border-box;
      padding: 0 0 0 80px;
      text-align: center;
      font-size: 14px;
      .content-lis {
        height: 100%;
      }
      &:hover{
        background: #fdf2f3;
      }
      .content-lis:nth-child(1) {
        width: 25%;
        text-align: left;
      }
      .content-lis:nth-child(2) {
        width: 15%;
        text-align: left;
      }
      .content-lis:nth-child(3) {
        width: 15%;
        text-align: left;
      }
      .content-lis:nth-child(4) {
        width: 17%;
        text-align: left;
      }
      .content-lis:nth-child(5) {
        width: 13%;
        text-align: left;
      }
      .content-lis:nth-child(6) {
        width: 15%;
      }
    }
    .ivu-page {
      display: flex;
      justify-content: center;
      padding: 50px 0;
    }
  }
</style>
